<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
          name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <title>Document</title>
    <link href="../boot/css/bootstrap.min.css" rel="stylesheet">
    <!--核心jquery js-->
    <script src="../boot/js/jquery-3.4.1.min.js"></script>
    <!--bootstrap 核心 js-->
    <script src="../boot/js/bootstrap.min.js"></script>


</head>
<body>

<!--基本导航 nav 标签也 nav-tabs-->
<ul class="nav nav-tabs">
    <li class="active"><a href="">nav-tabs基本导航</a></li>
    <li><a href="">a</a></li>
    <li><a href="">a</a></li>
</ul>

<br><br><br>

胶囊式标签pills <br>
<ul class="nav nav-pills">
    <li><a href="">nav-pills胶囊式标签</a></li>
    <li class="active"><a href="">active</a></li>
    <li><a href="">a</a></li>
</ul>
<br><br><br>
<!--垂直胶囊-->
<ul class="nav nav-pills nav-stacked">
    <li><a href="">nav-pills nav-stacked垂直胶囊</a></li>
    <li class="active"><a href="">active</a></li>
    <li><a href="">a</a></li>
</ul>

<!--两端对齐标签页-->
<div class="row">
    <div class="col-sm-6">
        <!--自适应父容器宽度 nav-justified-->
        <ul class="nav nav-tabs nav-justified">
            <li class="active"><a href="">自适应父容器active</a></li>
            <li class="disabled"><a href="">disabled</a></li>
            <li><a href="">a</a></li>
        </ul>
    </div>
</div>

<!--基本导航中添加下拉菜单-->
<ul class="nav nav-tabs">a
    <li class="active"><a href="">基本导航添加下拉菜单</a></li>
    <li><a href=""></a></li>
    <!--下拉菜单-->
    <li class="dropdown">
        <a data-toggle="dropdown">导航栏中添加下拉菜单 <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li>a</li>
            <li>b</li>
        </ul>
    </li>
</ul>
<br><br><br>

</body>
</html>